<template>
    <div class="container">
        <div class="box box1" ><TimeChartZhiShuComponent_QuanA :num="data" :time="time" code="999888" name="全A等全"/></div>
        <div class="box box2"><TimeChartZhiShuComponent_ShangZheng :num="data" :time="time" code="000001" name="上证指数"/></div>
        <div class="box box3"><TimeChartZhiShuComponent_VolMoney :num="data" :time="time" code="999999" name="成交量分时图"/></div>
        <div class="box box4"><TimeChartZhiShuComponent_MainPlayer :num="data" :time="time" code="1000000" name="主力资金流向"/></div>
  </div>

  

  <TimeChartService  :onEvent="receiveNum" :onPickEvent="pickTime"/>
    <!-- 
         -->
          
</template>

<script>
import TimeChartZhiShuComponent_QuanA from './base/TimeChartZhiShuComponent_QuanA.vue'
import TimeChartZhiShuComponent_ShangZheng from './base/TimeChartZhiShuComponent_ShangZheng.vue'
import TimeChartZhiShuComponent_MainPlayer from './base/TimeChartZhiShuComponent_MainPlayer.vue'
import TimeChartZhiShuComponent_VolMoney from './base/TimeChartZhiShuComponent_VolMoney.vue'
import TimeChartService from './operate/TimeChartZhiShuService.vue'

export default {
    components: {
        TimeChartService,
        TimeChartZhiShuComponent_QuanA,
        TimeChartZhiShuComponent_ShangZheng,
        TimeChartZhiShuComponent_VolMoney,
        TimeChartZhiShuComponent_MainPlayer,
    },
    data() {
        return {
            data:0,
            time:'2024-08-02',
            stockCode1:'999888'
        }
    },
    mounted() {
        // 动态设置网页标题
        document.title = "指数";
    },
    methods: {
        receiveNum(value) {
            this.data = value
            console.log("数量", value)
        },
        pickTime(value) {
            this.time = value
            console.log("时间：" + value)
        }
    }
    
}
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  grid-template-rows: 1fr 1fr;   /* 两行等高 */
  gap: 50px;                     /* 格子之间的间距 */
  width: 100%;                  /* 容器宽度 */
  height: 100%;                 /* 容器高度 */
}

.box {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 5px;
  height: 330px;
}
</style>